<template>
    <div class="bookshop">
        <div class="topseach">
            <span class="top_spn1"><img src="../assets/menu@2x.png" alt=""></span>
            <span class="top_spn2">
                <span class="top_spn3"><img src="../assets/seach.png" alt=""></span>
                <span class="top_spn4"><input type="text" placeholder="搜索书名、作者或出版社"></span>
            </span>
        </div>
        <div class="banner">
            <img src="../assets/banner1@2x.png" alt="">
        </div>
        <div class="book clearfix">
            <div class="left fl">
                <div class="one clearfix">
                    <div class="fl one_a">
                        <h3>精选好书</h3>
                        <p>热销书籍，等你来抢</p>
                    </div>
                    <div class="fl one_b">
                        <img src="../assets/27926894-1_l_3@2x.png" alt="">
                    </div>
                </div>
                <div class="two clearfix">
                    <div class="fl one_c">
                        <h3>品质好书</h3>
                        <p>最新上架,点击秒抢</p>
                    </div>
                    <div class="fl one_d">
                        <img src="../assets/27899543-1_l_4@2x.png" alt="">
                    </div>
                </div>
            </div>
            <div class="right fr">
                <h3>粉丝福利</h3>
                <p class="qiang">低价抢好书，限量发售</p>
                <p class="imgs"><img src="../assets/24156408-1_l_5@2x.png" alt=""></p>
            </div>
        </div>
        <div class="list">
            <ul class=" clearfix">
                <li class="fl" style="padding-top:0.5rem;">
                    <p style="margin-bottom:0.4rem;"><img src="../assets/qingsong_08.png" alt=""></p>
                    <h3>轻松上小学</h3>
                    <p class="price"><span>￥29.00</span> <del>￥56.00</del></p>
                </li>
                <li class="fl">
                    <p><img src="../assets/chengyu_03.png" alt=""></p>
                    <h3>成语接龙</h3>
                    <p class="price"><span>￥29.00</span> <del>￥56.00</del></p>
                </li>
                <li class="fl">
                    <p><img src="../assets/sanbu_05.png" alt=""></p>
                    <h3>初中作文提升三步</h3>
                    <p class="price"><span>￥29.00</span> <del>￥56.00</del></p>
                </li>
                <li class="fl">
                    <p><img src="../assets/qingsong_08.png" alt=""></p>
                    <h3>轻松上小学</h3>
                    <p class="price"><span>￥29.00</span> <del>￥56.00</del></p>
                </li>
                <li class="fl">
                    <p><img src="../assets/qingsong_08.png" alt=""></p>
                    <h3>轻松上小学</h3>
                    <p class="price"><span>￥29.00</span> <del>￥56.00</del></p>
                </li>
                <li class="fl">
                    <p><img src="../assets/qingsong_08.png" alt=""></p>
                    <h3>轻松上小学</h3>
                    <p class="price"><span>￥29.00</span> <del>￥56.00</del></p>
                </li>
            </ul>
        </div>
        <commentfoot class="footbar"></commentfoot>

    </div>
</template>

<script>
import commentfoot from '../components/footbar';
    export default {
        name:'bookshop',
        data (){
            return {

            }
        },
        components:{
                commentfoot
        }
    }
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
@family1: AdobeHeitiStd_regular;
.bookshop{
    width: 100%;
    font-size: 0;
    height: 100%;
    position: relative;
    .topseach{
        width: 100%;
        background-color: #fff;
        // height: 1.36rem;
        padding: 0.6rem 0.2rem 0.3rem ;
        span{
            display: inline-block;
        }
        .top_spn1{
            width: 0.4rem;
            height: 0.4rem;
            margin-right:0.2rem;
            img{
                width: 100%;
            }
        }
        .top_spn2{
            width: 85%;
            height: 0.5rem;
            background-color: #f8f8f8;
            border-radius: 0.5rem;
            .top_spn3{
                width: 5%;
                height: 100%;
                //  overflow:hidden;
                margin-left:3%;
                margin-top:0.08rem;
                img{
                    width: 100%;
                }
            }
            .top_spn4{
                width: 90%;

                input{
                    width: 100%;
                    height: 95%;
                    text-indent: 0.15rem;
                    background-color: transparent;
                     font-family: @family;
                        font-size: 0.2rem;
                        color:rgb(159,159,159);
                    &::placeholder{
                        font-family: @family;
                        font-size: 0.2rem;
                        color:rgb(159,159,159);
                    }
                }
            }
        }
    }
    .banner{
        width: 100%;
        height: 2.8rem;
        img{
            width: 100%;
        }
    }
    .book{
        width: 100%;
        height: 3.82rem;
        margin-top:0.2rem;
        overflow: hidden;
        .left{
            width: 55%;
            height: 100%;
            .one{
                background-color: #fff;
                height: 49%;
                padding-left: 0.3rem;
                padding-top:0.7rem;
                padding-bottom: 0.6rem;
                box-sizing: border-box;
                .one_a{
                   h3{
                       font-family: @family;
                       color: rgb(237,26,33);
                       font-size: 0.28rem;
                   }
                   p{
                       font-size: 0.22rem;
                       color:rgb(120,120,120);
                       font-family: @family;
                   }
                }
                .one_b{
                   width: 1.5rem;
                   height: 1.5rem; 
                   margin-top: -0.5rem;
                //    margin-left:0.1rem;
                   img{
                       width: 100%;
                   }
                }
                
            }
            .two{
                background-color: #fff;
                margin-top:2%;
                height: 49%;
                 padding-left: 0.3rem;
                padding-top:0.7rem;
                padding-bottom: 0.6rem;
                box-sizing: border-box;
                .one_c{
                   h3{
                       font-family: @family;
                       color: rgb(237,26,33);
                       font-size: 0.28rem;
                   }
                   p{
                       font-size: 0.22rem;
                       color:rgb(120,120,120);
                       font-family: @family;
                   }
                }
                .one_d{
                   width: 1.5rem;
                   height: 1.5rem; 
                     margin-top: -0.5rem;
                   img{
                       width: 100%;
                   }
                }
                
            }
        }
        .right{
            width: 43%;
            margin-left:2%;
            background-color: #fff;
            height: 100%;
            padding-top:0.5rem;
            box-sizing: border-box;
            text-align: center;
            h3{
                font-family: @family;
                font-size: 0.28rem;
                color:rgb(0,104,233);
                margin-bottom: 0.05rem;
            }
            p.qiang{
                font-size: 0.22rem;
                color:rgb(120,120,120);
                font-family: @family;
            }
            p.imgs{
                width: 2.07rem;
                height: 2.07rem;
                margin: 0 auto;
                margin-top:0.3rem;
                img{
                    width: 100%;
                }
            }
        }
    }
    .list{
        font-family: @family;
        font-size: 0.26rem;
        color:#111;
        margin-top:0.2rem;
        overflow-y: scroll;
        li{
            background-color: #fff;
            width: 30%;
            margin-left:2.5%;
            margin-bottom: 0.2rem;
            
            p{
            &:nth-child(1){
                width: 2.21rem;
                // height: 2.17rem;
                img{
                    width: 100%;
                }
            }
            &.price{
                margin-top:0.1rem;
                span{
                    color: #e71a1c;
                    margin-right:0.1rem;
                }
                del{
                    color:#949494;
                }
            }
        }
        h3{
            color:#262221;
            font-weight: bold;
            font-size: 0.24rem;
        }
        }
    }
}

</style>
<style lang="less">
    .bookshop{
        .mint-tabbar {
            background-image: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), color-stop(50%, #d9d9d9), color-stop(50%, transparent));
            background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: top left;
            position: relative;
            background-color: #fafafa;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            right: 0;
            bottom: 0;
            left: 0;
            position: fixed;
            text-align: center;
        }
    }
</style>